{% extends "base.html" %}
{% load i18n %}
<body>
{% block detail %}
    <div class="main">
        <div class="addWrap">
            <h2>
                <span><b>{% trans 'Add a case problem and the solution' %}</b><em>(<i>*</i>{% trans 'is required' %})</em></span>
            </h2>

            <form id="problemForm" action="/problem/add/" method="post">{% csrf_token %}

                <dl>
                    <dt><i>*</i>{% trans 'Problem name' %}：</dt>
                    <dd><input type="type" name="problemName" id="problemName"></dd>
                </dl>
                <dl>
                    <dt><i>*</i>{% trans 'Problem type' %}：</dt>
                    <dd><select name="problemType" id="problemType">
                        {% for problemType in problemTypes %}
                            <option value="{{ problemType.id }}">{{ problemType.name }}</option>
                        {% endfor %}
                    </select></dd>
                </dl>
                <dl>
                    <dt><i>*</i>{% trans 'Problem description' %}：</dt>
                    <dd><textarea name="problemDescription" id="problemDescription"></textarea></dd>
                </dl>
                <dl>
                    <dt>{% trans 'Solution name' %}：</dt>
                    <dd><input type="type" name="solutionName" id="solutionName"></dd>
                </dl>
                <dl>
                    <dt>{% trans 'Solution description' %}：</dt>
                    <dd><textarea name="solutionDescription" id="solutionDescription"></textarea></dd>
                </dl>
                <div id="validate"></div>
                <input type="hidden" name="caseId" value="{{ caseId }}">
                <input type="button" onclick="check()" value="{% trans 'Submit' %}" class="btn"/>
            </form>
        </div>
    </div>


{% endblock %}
{% block js %}
    <script language="javascript">
        function check() {
            if ($("#problemName").val() == '') {
                $("#validate").empty();
                $("#validate").html("难题名称为必需项!");
                return false;
            }
            if ($("#problemType").val() == '') {
                $("#validate").empty();
                $("#validate").html("难题类型为必需项!");
                return false;
            }
            if ($("#problemDescription").val() == '') {
                $("#validate").empty();
                $("#validate").html("难题描述为必需项!");
                return false;
            }
            if ($("#solutionDescription").val() != '' && $("#solutionName").val() == '') {
                $("#validate").empty();
                $("#validate").html("解决方案名称需要输入!");
                return false;
            }
            $("#problemForm").submit();
        }
    </script>
{% endblock %}
</body>
</html>